<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta name="title" th:content="'产品_'+${title}" />
		<meta name="description" th:content="${description}" />
		<meta name="keywords" th:content="${keywords}" />
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>产品</title>
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/swiper.min.css">
		<link rel="stylesheet" href="css/index.css">
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js"></script>
		<style>
			.productBox {
				display: flex;
				flex-wrap: wrap;
			}

			.productType {
				width: calc(50% - 15px);
				padding: 15px 0 0 15px;
				margin-right: 15px;
				box-shadow: rgb(0 0 0 / 10%) 0px 5px 5px, rgb(0 0 0 / 10%) 0px -1px 5px;
				box-sizing: border-box;
				margin-bottom: 15px;
			}

			.productTypeList {
				padding-bottom: 0;
			}

			@media screen and (max-width: 768px) {
				.productType {
					width: 100%;
					margin-right: 0;
				}
			}
		</style>
	</head>
	<body>
		<div id="root">
			<div>
				<div class="cOYSvF">
					<div class="header-page"></div>
					<div class="swiper-shop swiper-container">
						<div class="swiper-wrapper">
							<div class="swiper-slide"  th:each="banner :${banners}" th:style="'background: url(' + ${banner.images} + ');'"></div>
						</div>
						<div class="swiper-pagination"></div>
					</div>
					<div class="eZHbVe" style="margin-top: 30px;">
						<div style="text-align: center;">
							<img class="typeTitle" src="img/title1.png" alt="">
						</div>
						<div class="productBox">
							<!-- 分类循环 -->
							<div class="productType" th:each="item :${catagoryVos}">
								<p class="WJaRe" th:text="${item.label}">汽车整车</p>
								<div class="productTypeList clearfix flex flex-wrap">
									<!-- 二级分类 -->
									<a th:href="@{'product/'+${item2.value}+'.html'}" th:each="item2:${item.children}" class="type-list" th:text="${item.label}">乘用车</a>
								</div>
							</div>
							<!-- 循环结束 -->
						</div>
					</div>
				</div>
			</div>
			<div class="footer-page"></div>
			<div class="login-cli"></div>
		</div>
		<script>
			$(function() {
				$(".header-page").load("http://122.14.195.113:8089/header.html");
				$(".footer-page").load("http://122.14.195.113:8089/footer.html");
				$(".login-cli").load("http://122.14.195.113:8089/login-cli.html");
			});

			var mySwiper = new Swiper('.swiper-comp .swiper-container', {
				slidesPerView: 'auto',
				spaceBetween: 15,
				loop: true,
				navigation: {
					nextEl: '.swiper-comp .swiper-button-next',
					prevEl: '.swiper-comp .swiper-button-prev',
				},
				observer: true,
				observeParents: true,
				watchOverflow: true,
				breakpoints: {
					768: {
						slidesPerView: 4
					},
					1280: { //当屏幕宽度大于等于1280
						slidesPerView: 7,
					}
				}
			});
		</script>
	</body>
</html>
